<template>
  <el-card>
    <el-form ref="form" :model="form" label-width="130px">

  <section>
      <header class="section-header first">
        <div>基本信息</div>
      </header>
      <div class="field-section">
        <el-row :gutter="15">

          <!-- <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="配件分类">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col> -->

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="区域型号">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="官网 Model">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="主型号">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="外部型号">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="内部型号">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="产品名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="销售类型">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="产品系列">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="所属产品线">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="物料号">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="产品星级">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="是否推荐">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="官网显示">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="产品状态">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="是否促销">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="EAN">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="UPC">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <!-- <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="UCC">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col> -->

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="stock">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="Warranty质保期">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="每箱包数">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="重量">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="长*宽*高">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

      </div>
    </section>

    <section>
      <header class="section-header">
        <div>Features</div>
        <el-button type="primary" @click="featureCount += 1">添加</el-button>
      </header>
      <div class="mb20" v-for="i in featureCount" :key="i">
        <div class="text-right mb5"><el-button type="primary" v-if="i > 1">移除</el-button></div>
        <ueditor
          @input="modleMsg"
          v-model="form.name"></ueditor>
      </div>
    </section>

    <section>
      <header class="section-header">
        <div>District product description</div>
        <el-button type="primary" @click="districtCount += 1">添加</el-button>
      </header>
      <div class="mb20" v-for="i in districtCount" :key="i">
        <div class="text-right mb5"><el-button type="primary" v-if="i > 1">移除</el-button></div>
        <ueditor
          @input="modleMsg"
          v-model="form.name"></ueditor>
      </div>
    </section>

    <section>
      <header class="section-header">
        <div>Specification</div>
      </header>
      <div>
        <el-table
          class="section-bg"
          :data="specificationData"
          style="width: 100%">
          <el-table-column
            label="列表标题">
            <template slot-scope="scope">
              <el-input v-model="scope.row.label" placeholder="请输入标题"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="列表参数">
            <template slot-scope="scope">
              <el-input v-model="scope.row.value" placeholder="请输入参数"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width='50px'>
            <template slot-scope="scope">
              <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="btn-bar text-center">
          <el-button icon="el-icon-plus"  type="text" @click="addSpecification" >{{ $t('pages.screen.add')}}</el-button>
        </div>

      </div>
    </section>

  <el-form-item class="text-center footer-btn-group">
    <el-button type="primary" @click="onSubmit">确定</el-button>
    <el-button type="danger">取消</el-button>
  </el-form-item>
</el-form>

  </el-card>
</template>

<script>
import ueditor from '@/components/ueditor'
  export default {
    data () {
      return {
        featureCount: 1,
        districtCount: 1,
        form: {

        },
        specificationForm: {

        },
        specificationData: [{
          label: '2016-05-02',
          value: '王小虎'
        }, {
          label: '2016-05-04',
          value: '王小虎1'
        }, {
          label: '2016-05-01',
          value: '王小虎2'
        }, {
          label: '2016-05-03',
          value: '王小虎3'
        }]
      }
    },
    components: {
      ueditor,
    },
    computed: {

    },
    watch: {

    },
    created () {

    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleDelete(index, row) {
        this.specificationData.splice(index, 1)
      },
      addSpecification() {
        this.specificationData.push({
          label: '',
          value: ''
        })
      },
      // 富文本操作
      modleMsg(data) {
        console.log(data)
      },
    }
  }
</script>

<style scoped>
  .section-header {
    margin: 15px 0;
    color: #666;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .section-header.first {
    margin-top: 0px;
  }

  .field-section {
    padding: 15px;
    border-radius: 4px;
    background: #f5f5f5;
  }

  .section-bg {
    background: #f5f5f5;
  }

  .el-table >>> .el-table__row {
    background-color: transparent;
  }

  .btn-bar {
    margin-top: 5px;
    margin-bottom: 20px;
    background: #f5f5f5;
  }

  .btn-bar >>> .el-button {
    width: 100%;
    display: block;
    text-align: center;
  }

  .footer-btn-group >>> .el-form-item__content {
    margin-left: 0!important;
  }

  .mb20 {
    margin-bottom: 20px;
  }

  .mb5 {
    margin-bottom:5px;
  }
</style>
